<div class="m-2">
    <i class="fa fa-eye mr-1"></i><label class="title">用户管理</label>
    <a href="#" class="btn-link pull-right" data-toggle="modal" data-target="#mdl-add-user"><i class="fa fa-plus mr-1"></i>添加帐号</a>
    <hr class="m-0">

    <table class="table table-sm table-bordered mt-2">
        <thead class="thead-light">
            <tr>
                <th scope="col">#</th>
                <th scope="col">帐号</th>
                <th scope="col">用户名</th>
                <th scope="col">管理员</th>
                <th scope="col">操作</th>
            </tr>
        </thead>
        <tbody>
            {% for idx, info in ipairs(users) do %}
            <tr>
                <th scope="row">{{idx}}</th>
                <td>{{info.account}}</td>
                <td>{{info.name}}</td>
                <td><i class="fa {{info.is_su == 1 and 'fa-check-square-o' or 'fa-square-o'}}"></i></td>
                <td>
                    <button type="button" class="btn btn-sm btn-info" data-toggle="modal" data-target="#mdl-edit-user" data-id="{{info.id}}" data-account="{{info.account}}" data-name="{{info.name}}" data-issu="{{info.is_su}}">修 改</button>
                    {% if info.is_locked == 1 then %}
                    <button type="button" class="btn btn-sm btn-default" data-toggle="modal" data-target="#mdl-unlock-user" data-id="{{info.id}}" data-name="{{info.name}}">解 锁</button>
                    {% else %}
                    <button type="button" class="btn btn-sm btn-default" data-toggle="modal" data-target="#mdl-disable-user" data-id="{{info.id}}" data-name="{{info.name}}">禁 用</button>
                    {% end %}
                    <button type="button" class="btn btn-sm btn-danger" data-toggle="modal" data-target="#mdl-del-user" data-id="{{info.id}}" data-name="{{info.name}}">删 除</button>
                </td>
            </tr>            
            {% end %}
        </tbody>
    </table>
</div>

<!-- 添加成员 -->
<div id="mdl-add-user" class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog model-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">添加成员</h5>
            </div>
            <div class="modal-body">
                <div id="err"></div>

                <form id="form-add-user">
                    <div class="form-group">
                        <input class="form-control" type="text" name="account" placeholder="帐号" required>
                    </div>

                    <div class="form-group">
                        <input class="form-control" type="text" name="name" placeholder="显示用户名" required>
                    </div>

                    <div class="form-row">
                        <div class="form-group col">
                            <input class="form-control" type="password" name="pswd" placeholder="初始密码" required>
                        </div>
                        <div class="form-group col">
                            <input class="form-control" type="password" name="cfm_pswd" placeholder="确认密码" required>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="is_su" name="is_su">
                            <label class="form-check-label" for="is_su">拥有管理权限</label>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="return add_user();">确  定</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取  消</button>
            </div>
        </div>
    </div>
</div>

<!-- 修改成员 -->
<div id="mdl-edit-user" class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog model-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">编辑成员</h5>
            </div>
            <div class="modal-body">
                <div id="err"></div>

                <form id="form-edit-user">
                    <input id="edit_user_id" name="id" type="number" hidden>

                    <div class="form-group">
                        <input class="form-control" type="text" id="edit_user_account" name="account" placeholder="帐号" required>
                    </div>

                    <div class="form-group">
                        <input class="form-control" type="text" id="edit_user_name" name="name" placeholder="显示用户名" required>
                    </div>

                    <div class="form-group">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="edit_user_is_su" name="is_su">
                            <label class="form-check-label" for="is_su">拥有管理权限</label>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="return edit_user();">确  定</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取  消</button>
            </div>
        </div>
    </div>
</div>

<!-- 解除帐号禁止登录 -->
<div id="mdl-unlock-user" class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog model-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">解锁帐号</h5>
            </div>
            <div class="modal-body">
                <div id="err"></div>

                <form id="form-unlock-user">
                    <input id="unlock_user_id" name="id" type="number" hidden>
                    请确认需要解锁的用户：<span id="unlock_user_name" class="text-primary"></span>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="return unlock_user();">确  定</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取  消</button>
            </div>
        </div>
    </div>
</div>

<!-- 禁用用户但不删除，防止删除用户后，与其关联的任务，文档等显示出“神秘人” -->
<div id="mdl-disable-user" class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog model-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">禁用帐号</h5>
            </div>
            <div class="modal-body">
                <div id="err"></div>

                <form id="form-disable-user">
                    <input id="disable_user_id" name="id" type="number" hidden>
                    请确认需要禁用的用户：<span id="disable_user_name" class="text-danger"></span>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" onclick="return disable_user();">确  定</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取  消</button>
            </div>
        </div>
    </div>
</div>

<!-- 删除用户 -->
<div id="mdl-del-user" class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog model-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">删除用户</h5>
            </div>
            <div class="modal-body">
                <div id="err"></div>

                <form id="form-del-user">
                    <input id="del_user_id" name="id" type="number" hidden>
                    请确认需要删除的用户：<span id="del_user_name" class="text-danger"></span>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" onclick="return del_user();">确  定</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取  消</button>
            </div>
        </div>
    </div>
</div>

<script>

$('#mdl-edit-user').on('show.bs.modal', function(e) {
    var button = $(e.relatedTarget);

    $('#mdl-edit-user #err').empty();
    $('#mdl-edit-user #edit_user_id').val(button.data('id'));
    $('#mdl-edit-user #edit_user_account').val(button.data('account'));
    $('#mdl-edit-user #edit_user_name').val(button.data('name'));
    $('#mdl-edit-user #edit_user_is_su').get(0).checked = (button.data('issu') == 1);
});

$('#mdl-unlock-user').on('show.bs.modal', function(e) {
    var button = $(e.relatedTarget);

    $('#mdl-unlock-user #err').empty();
    $('#mdl-unlock-user #unlock_user_id').val(button.data('id'));
    $('#mdl-unlock-user #unlock_user_name').text(button.data('name'));
});

$('#mdl-disable-user').on('show.bs.modal', function(e) {
    var button = $(e.relatedTarget);

    $('#mdl-disable-user #err').empty();
    $('#mdl-disable-user #disable_user_id').val(button.data('id'));
    $('#mdl-disable-user #disable_user_name').text(button.data('name'));
});

$('#mdl-del-user').on('show.bs.modal', function(e) {
    var button = $(e.relatedTarget);

    $('#mdl-del-user #err').empty();
    $('#mdl-del-user #del_user_id').val(button.data('id'));
    $('#mdl-del-user #del_user_name').text(button.data('name'));
});

function __post(url, form, dialog, err_title) {
    $.ajax({
        url: url,
        type: 'POST',
        data: new FormData(document.getElementById(form)),
        dataType: 'json',
        processData: false,
        contentType: false,
        cache: false,
        success: function(ret) {
            if (ret.ok) {
                $('.model #err').empty();
                $('.modal').modal('hide');
                open_admin('/dashboard/admin/users');
            } else {
                showError('#' + dialog + ' #err', err_title, ret.err_msg);
            }
        }
    });
}

function add_user() {
    __post('/dashboard/admin/add_user', 'form-add-user', 'mdl-add-user', '添加用户失败');
}

function edit_user() {
    __post('/dashboard/admin/edit_user', 'form-edit-user', 'mdl-edit-user', '修改用户失败');
}

function unlock_user() {
    __post('/dashboard/admin/unlock_user', 'form-unlock-user', 'mdl-unlock-user', '解锁帐号失败');
}

function disable_user() {
    __post('/dashboard/admin/disable_user', 'form-disable-user', 'mdl-disable-user', '禁用帐号失败');
}

function del_user() {
    __post('/dashboard/admin/del_user', 'form-del-user', 'mdl-del-user', '删除用户失败');
}
</script>